<template>
	<view class="page">
		<view class="tab">
			<image class="tab_img" @click="_tab(true)" :src="tab?'https://www.mlito.com/jy/img/xy1.png':'https://www.mlito.com/jy/img/xy1_ok.png'" mode="aspectFill"></image>
			<image class="tab_img" @click="_tab(false)" :src="tab?'https://www.mlito.com/jy/img/xy2.png':'https://www.mlito.com/jy/img/xy2_ok.png'" mode="aspectFill"></image>
		</view>
		
		<view class="form">
			<view class="box">
				<span>姓名</span>
				<input type="text" placeholder="请输入您的姓名" placeholder-class="in_pl">
			</view>
			<view class="box">
				<span>电话</span>
				<input type="text" placeholder="请输入您的电话" placeholder-class="in_pl">
			</view>
			<view class="te">
				<span>心愿描述</span>
				<textarea placeholder="请输入详细信息"  placeholder-class="in_pl" cols="30" rows="10"></textarea>
			</view>
			<view class="img">
				<span>附件</span>
				<view class="imgbox">
					<image class="imgbox_img" src="https://www.mlito.com/jy/img/banner.png" mode="aspectFill"></image>
					<image class="imgbox_img" src="https://www.mlito.com/jy/img/banner.png" mode="aspectFill"></image>
					<image class="imgbox_img" src="https://www.mlito.com/jy/img/addimg.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		
	<image class="submit" src="https://www.mlito.com/jy/img/submit.png" mode="widthFix"></image>
	
		
	</view>

</template>

<script>
	export default {
		data() {
			return {
				tab: true
			}
		},
		created() {

		},
		mounted() {

		},
		onReady() {},
		onLoad(e) {},
		onShow() {

		},
		methods: {
			_tab(e){
				this.tab = e
			}
		}
	}
</script>
<style scoped lang="scss">
	.page {
		width: 100vw;
		min-height: 100vh;
		background: url(https://dcdn.it120.cc/haitangweiguang/login_bj.png) no-repeat;
		background-size: 100%;
		background-color: #fff;
		display: flex;
		flex-flow: wrap;
		align-content: flex-start;
	}

	.tab {
		width: 663rpx;
		height: 119rpx;
		margin: 30rpx 0 0 43rpx;
	}
	
	.tab_img{
		width: 331.5rpx;
		height: 119rpx;
	}
	
	.form{
		width: 655rpx;
		height: auto;
		margin: 20rpx;
		border-radius: 30rpx;
		background: #fff;
		margin: 30rpx 47.5rpx 50rpx;
		padding: 30rpx 0;
	}
	
	.box{width: 570rpx; height: 76rpx; border-bottom: 3rpx solid #979797; margin: 0 42.5rpx; display: flex;}
	.box span{width: 100rpx; height: 76rpx; line-height: 76rpx; color:#333333;font-size: 42rpx; margin: 0 42rpx 0 42rpx; display: inline;}
	.box input{width: 400rpx; height: 76rpx; line-height: 76rpx; color:#333333;font-size: 35rpx; margin: 0 0 0 0;}
	.in_pl{color:#979797;font-size: 35rpx; }
	.te{width: 570rpx; height: auto; border-bottom: 3rpx solid #979797; margin: 0 42.5rpx; display: flex;flex-flow: wrap;
		align-content: flex-start;}
	.te span{width: 100%; height: 76rpx; line-height: 76rpx; color:#333333;font-size: 42rpx; margin: 0 0 0 0; display: block;}
	.te textarea{width: 100%; height: 450rpx; padding: 20rpx; border-radius: 20rpx; border: 3rpx solid #979797; line-height: 76rpx; color:#333333;font-size: 35rpx; margin: 0 0 20rpx 0;display: block; box-sizing: border-box;}
	
	.img{width: 570rpx; height: auto;  margin: 20rpx 42.5rpx 0; display: flex;}
	.img span{width: 100rpx; height: 76rpx; line-height: 76rpx; color:#333333;font-size: 42rpx; margin: 0 42rpx 0 42rpx; display: inline;}
	.imgbox{width: 400rpx; height: auto;margin: 0 0 0 0;	}
	.imgbox_img{width: 185rpx; height: 185rpx;margin: 0 20rpx 20rpx 0; display: inline-block; }
	.imgbox_img:nth-child(2n){ margin-right: 0;}
	
	.submit{ width: 551rpx; height: auto; margin:20rpx 99.5rpx 50rpx;}
	
</style>